{extend name="Base/common"}
{block name="header"}
<link rel="stylesheet" href="__HOME__/css/form.css">
{include file="Public/header1"}
{/block}
{block name="body"}
<div class='detail' style='background-color: #f7f7f4'>
    <section id="tour_data" data-channel_id="11756" data-product_type="4" data-breakdown_symbol="&amp;#8364;" class="tour-main">
        <div class="row">
            <!--新闻详细start-->
            <div class="columns small-12 medium-7 large-8 content-column">
                <h1 style="font-size: 30px; text-align: center; color: #555; font-weight: bold; padding-bottom: 20px">茂职院保修表单</h1>
                <h2 style="font-size: 18px; color: #888; padding-bottom: 10px">欢迎你报修,我们收到订单后尽快解决！</h2>
                <section id="secondary-content">
                    <div class="row">
                        <i></i>
                        <div class="columns small-10 medium-10 large-10 tour-availability-column small-pull-1 medium-pull-1 large-pull-1">
                            <h3>维修单 &amp; 表单</h3>
                            <form action="/User/form" id='form' method="post">
                                <div class="desktop">
                                    <div id="tour-bookings">
                                        <div class="tour-availability-form">
                                            <div class="input-grid" style='overflow: hidden'>
                                                <div class="cell right-break">
                                                    <label>请不要留空白</label>
                                                    <p>请认真填写</p>
                                                </div>
                                                <div class="cell">
                                                    <label>项目名称</label>
                                                    <div class="js_incrementor incrementor">
                                                        <span class="clear control fa fa-close"></span>
                                                        <input class="booking-counter check" data-rate-id="r1" placeholder="例如 电灯破损" data-minimum-value="1" data-maximum-value="20" type="text" value="" name='name'>
                                                    </div>
                                                </div>
                                                <div class="break"></div>
                                                <div class='cell-list'>
                                                    <div class="cell">
                                                        <label>维修类型</label>
                                                        <div class="js_incrementor incrementor" style="position: relative;">
                                                            <span class="clear control fa fa-arrow-down" id='fa-arrow-down'></span>
                                                            <input readonly="" id='false' class="booking-counter" data-rate-id="r2" placeholder="例如 电器类/电子信息类" data-minimum-value="1" data-maximum-value="20" type="text" value="" name='repair_unit'>
                                                            <input class="booking-counter check" id='true' data-rate-id="r2" data-minimum-value="1" data-maximum-value="20" type="hidden" value="" name='repair_type'>
                                                            <div class='down-box'>
                                                                <ul>
                                                                    {volist name='jobs' id='item'}
                                                                    <li>{$item.post_name} <input type="hidden" value='{$item.post}'></li>
                                                                    {/volist}
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="cell">
                                                        <label>故障描述</label>
                                                        <div class="js_incrementor incrementor">
                                                            <span class="clear control fa fa-close"></span>
                                                            <input class="booking-counter check" data-rate-id="r3" data-minimum-value="1" placeholder="例如 灯泡烧坏或者爆了" data-maximum-value="20" type="text" value="" name='repair_desc'>
                                                        </div>
                                                    </div>
                                                    <div class="cell">
                                                        <label>区域</label>
                                                        <div class="js_incrementor incrementor">
                                                            <span class="clear control fa fa-close"></span>
                                                            <input class="booking-counter check" data-rate-id="r2" placeholder="例如 男生宿舍几栋几楼" data-minimum-value="1" data-maximum-value="20" type="text" value="" name='address'>
                                                        </div>
                                                    </div>
                                                    <div class="cell">
                                                        <label>手机</label>
                                                        <div class="js_incrementor incrementor">
                                                            <span class="clear control fa fa-close"></span>
                                                            <input class="booking-counter check" data-rate-id="r2" placeholder="例如 13129614300" data-minimum-value="1" data-maximum-value="20" type="text" value="" name='phone'>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- <div class="pickups" style='padding-left: 0; width: 100%'>
                                                <label>姓名</label>
                                                <div class="js_incrementor">
                                                    <label style='display: inline-block;'>
                                                        <div class="fake-radio active"></div>
                                                        <input type="radio" name="pickup_choice" value="chosen" checked="checked"> 男士
                                                    </label>
                                                    <label style='display: inline-block; margin:10px 0 0 20px'>
                                                        <div class="fake-radio "></div>
                                                        <input type="radio" name="pickup_choice" value="chosen" checked="checked"> 女士
                                                    </label>
                                                </div>
                                            </div> -->
                                            </div>
                                            <script>
                                                $(function() {
                                                    var $radio          = $('.input-grid').find('.pickups').find('input[type=radio]')
                                                    var $radio1         = $('.input-grid').find('.pickups').find('.fake-radio')

                                                    $radio1.on('click', function() {
                                                        $radio1.each(function(i, n) {
                                                            n.className     = 'fake-radio'
                                                        })

                                                        $(this).addClass('active')
                                                    })

                                                    $('.input-grid').find('.clear').click(function() {
                                                        $(this).next().val('')
                                                    })


                                                    $('#fa-arrow-down').click(function() {
                                                        $('.down-box').toggleClass('active')
                                                        return false
                                                    })

                                                    $('.down-box').find('li').click(function() {
                                                        $('#false').val($(this).text())
                                                        $('#true').val($(this).find('input').val())
                                                        $('.down-box').toggleClass('active')
                                                    })
                                                })
                                        </script>
                                            <!-- <div class="cell" style="overflow: hidden">
                                            <div class="sidebar-header options" id="optionsHeader" style="display:block">通过什么方式发现我们？</div>
                                            <div id="optionsDrop" class="section cell" style="display: block;">
                                                <a data-toggle="dropdown" type="text" class="tour_options">你猜<span></span></a>
                                                <div class="down-box">
                                                    <a class="tour_options tour_options-hover">你猜</a>
                                                    <a class="tour_options tour_options-hover">你猜</a>
                                                    <a class="tour_options tour_options-hover">你猜</a>
                                                    <a class="tour_options tour_options-hover">你猜</a>
                                                </div>
                                            </div>
                                        </div> -->
                                            <!--/提交按钮-->
                                            <div class="top-price" style="margin-top: 24px; cursor: pointer;" onclick="submit()">
                                                From <span class="from_price" data-currency="EUR" data-round="false">提交</span>
                                            </div>
                                            <script>
                                                function submit() {
                                                    var $inputs             = $('form').find('.check');
                                                    var $check              = true
                                                    $inputs.each(function(i, n) {
                                                        console.log($(n).val())
                                                        if(!($.trim($(n).val()))) {
                                                            $check          = false
                                                        }
                                                    })
                                                    if($check) {
                                                        $('#form').submit()
                                                    } else {
                                                        window.alert('表单不能为空')
                                                    }
                                                }
                                            </script>
                                            <!--/提交按钮-->
                                            <!--/错误提示-->
                                            <div class="section cell pickups" style="display:block">
                                                <div class="sidebar-header pickup">
                                                    Pickup Location </div>
                                                <div class="section-wrap">
                                                    <div id="pickerror" class="message error" style="display: none;">
                                                        You have not entered all of the required information. Please select your desired pickup, or choose one of the other options on the list below </div>
                                                </div>
                                            </div>
                                            <!--/错误提示-->
                                            <div class="sidebar-header people" style="display:block; padding-top: 20px">
                                                我们的维修流程是怎样的？？
                                            </div>
                                            <div class="rates-section-wrapper" style="display:block;">
                                                <input readonly="" class="booking-counter" data-rate-id="r1" data-minimum-value="1" data-maximum-value="20" type="text" value="接到维修单">
                                                <input readonly="" class="booking-counter" data-rate-id="r1" data-minimum-value="1" data-maximum-value="20" type="text" value="随机分配维修工 (务必填写维修类,为了可以帮你选择更合适的维修工)">
                                                <input readonly="" class="booking-counter" data-rate-id="r1" data-minimum-value="1" data-maximum-value="20" type="text" value="上门维修">
                                                <input readonly="" class="booking-counter" data-rate-id="r1" data-minimum-value="1" data-maximum-value="20" type="text" value="评论留言">
                                            </div>
                                        </div>
                                        <!-- end tour availability form -->
                                        <div id="output_json"></div>
                                        <div class="cartloading">
                                            <div class="loader"></div>
                                        </div>
                                    </div>
                                    <!--/sidebar-->
                                </div>
                            </form>
                        </div>
                    </div>
                </section>
            </div>
            <!--新闻详细end-->
            <!--侧边栏start-->
            <div class="columns small-12 medium-5 large-4 calendar-column sticky-container" data-sticky-container="" style="height: 572px; margin-top: 92px">
                <div class="calendar-wrapper sticky" data-sticky="12kj3g-sticky" data-top-anchor="tour_data:top" data-btm-anchor="tour_data:bottom" data-sticky-on="medium" data-check-every="0" data-resize="5wmjio-sticky" data-events="resize" style="max-width: 384.984px;">
                    <h3>Check Availability</h3>
                    <div class="section cell">
                        <div class="tableKey">
                            <div>
                                <h5 class="selected">Selected</h5>
                                <h5 class="available">Available</h5>
                                <h5 class="unavailable">Unavailable</h5>
                                <h5 class="offer">Offer</h5>
                            </div>
                        </div>
                        <div id="calendar">
                            <div id="datepickerWrap" style="visibility: visible;">
                                <!-- datepicker -->
                                <div id="datepicker" class="dp-applied">
                                    <div id="calendar-38" class="dp-popup dp-popup-inline">
                                        <h2>November 2018</h2>
                                        <div class="dp-nav-prev"><a class="dp-nav-prev-year" href="#" title="Previous year" style="display: none;">&lt;&lt;</a><a class="dp-nav-prev-month" href="javascript:;" title="Previous month">&lt;</a></div>
                                        <div class="dp-nav-next"><a class="dp-nav-next-year" href="#" title="Next year" style="display: none;">&gt;&gt;</a><a class="dp-nav-next-month" href="javascript:;" title="Next month">&gt;</a></div>
                                        <div class="dp-calendar">
                                            <table cellspacing="2" class="jCalendar">
                                                <thead>
                                                    <tr>
                                                        <th scope="col" abbr="Monday" title="Monday" class="weekday">M</th>
                                                        <th scope="col" abbr="Tuesday" title="Tuesday" class="weekday">T</th>
                                                        <th scope="col" abbr="Wednesday" title="Wednesday" class="weekday">W</th>
                                                        <th scope="col" abbr="Thursday" title="Thursday" class="weekday">T</th>
                                                        <th scope="col" abbr="Friday" title="Friday" class="weekday">F</th>
                                                        <th scope="col" abbr="Saturday" title="Saturday" class="weekend">S</th>
                                                        <th scope="col" abbr="Sunday" title="Sunday" class="weekend">S</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="other-month weekday disabled">29</td>
                                                        <td class="other-month weekday disabled">30</td>
                                                        <td class="other-month weekday disabled">31</td>
                                                        <td class="current-month weekday disabled">1</td>
                                                        <td class="current-month weekday disabled">2</td>
                                                        <td class="current-month weekend disabled">3</td>
                                                        <td class="current-month weekend disabled">4</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="current-month weekday disabled">5</td>
                                                        <td class="current-month weekday disabled">6</td>
                                                        <td class="current-month weekday disabled">7</td>
                                                        <td class="current-month weekday disabled">8</td>
                                                        <td class="current-month weekday disabled">9</td>
                                                        <td class="current-month weekend disabled">10</td>
                                                        <td class="current-month weekend disabled">11</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="current-month weekday disabled">12</td>
                                                        <td class="current-month weekday disabled">13</td>
                                                        <td class="current-month weekday disabled">14</td>
                                                        <td class="current-month weekday disabled">15</td>
                                                        <td class="current-month weekday disabled">16</td>
                                                        <td class="current-month weekend disabled">17</td>
                                                        <td class="current-month weekend disabled">18</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="current-month weekday disabled">19</td>
                                                        <td class="current-month weekday disabled">20</td>
                                                        <td class="current-month weekday disabled">21</td>
                                                        <td class="current-month weekday disabled">22</td>
                                                        <td class="current-month weekday selected">23</td>
                                                        <td class="current-month weekend">24</td>
                                                        <td class="current-month weekend disabled">25</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="current-month weekday">26</td>
                                                        <td class="current-month weekday">27</td>
                                                        <td class="current-month weekday disabled">28</td>
                                                        <td class="current-month weekday">29</td>
                                                        <td class="current-month weekday">30</td>
                                                        <td class="other-month weekend">1</td>
                                                        <td class="other-month weekend disabled">2</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <!-- /datepicker -->
                            </div>
                            <!-- PASSING DATA TO VIEW.JS -->
                            <div id="php_avail" data-test="1" data-firstdate="23/11/2018" data-firstdate_sql="2018-11-23" data-deals="1231231">
                            </div>
                        </div>
                        <!--/calendar-->
                        <form data-submit="availability" method="post" id="check_avail_form" action="h://santaparkarcticworld.com/tour/checkAvailability" style="display:none">
                            <input type="text" value="11756" name="chID">
                            <input type="text" value="8" name="tID">
                            <input type="hidden" value="ajax" name="ajax">
                            <input type="text" value="date=2014-04-26&amp;r1=1" name="check_avail_qs" id="check_avail_qs">
                        </form>
                        <!--date=2014-04-26&r1=1-->
                    </div>
                    <!--/section cell-->
                    <div class="calendar-key show-desktop">
                        <ul>
                        </ul>
                    </div>
                </div>
            </div>
            <!--侧边栏end-->
        </div>
    </section>
</div>
{/block}
{block name="footer"}
{include file="Public/footer1"}
{/block}